import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { WhiteSpace, Flex, Grid, Button, Modal, List } from 'antd-mobile';
import styles from './styles.less';
import wx from 'wx';

const SettingsPage = ({ dispatch, location, profile, disabled, ...rest }) => {
 
  const settings = [{
    text: '编辑资料',
    pathname: 'update',
    icon: require('../../assets/icons/icon-edit.svg'),
  }, {
    text: '扫一扫',
    wechatApi: 'scanQRCode',
    icon: require('../../assets/icons/icon-scan.svg'),
  }, {
    text: '我的二维码',
    pathname: 'qrcode',
    icon: require('../../assets/icons/icon-qrcode.svg'),
  }, {
    text: '家庭组',
    pathname: 'family',
    icon: require('../../assets/icons/icon-family.svg'),
  }];
  const onAddto =() => {
      disabled = true;
      dispatch({ type: 'profile/save', payload: { disabled: disabled}});
  }

  const onClose =() => {
      disabled = false;
      dispatch({ type: 'profile/save', payload: { disabled: disabled}});
  }
  const onCamera =() => {
     dispatch({
      type: 'wechat/chooseImage',
      payload: {
          sourceType: ['camera'],
          actionType: 'profile/getHeadPortrait',
          onSuccess(payload) {
            dispatch({
              type: 'profile/getHeadPortrait',
              payload:{
                mediaId: payload.image,
              },
            });
          },
        },
    });
    disabled = false;
    dispatch({ type: 'profile/save', payload: { disabled: disabled}});
  }
  const onAlbum =() => {
     dispatch({
      type: 'wechat/chooseImage',
      payload: {
          sourceType: ['album'],
          actionType: 'profile/getHeadPortrait',
          onSuccess(payload) {
            dispatch({
              type: 'profile/getHeadPortrait',
              payload:{
                mediaId: payload.image,
              },
            });
          },
        },
    }); 
    disabled = false;
    dispatch({ type: 'profile/save', payload: { disabled: disabled}});
  }
  
  const goto = (page) => {
    if (page.wechatApi) {
      dispatch({
        type: 'wechat/scanQRCode',
        payload: {
          onSuccess(result) {
            try {
              const doctorId = result.split(':')[1];
              if (doctorId) {
                return dispatch({
                  type: 'relation/send',
                  payload: {
                    doctorId: doctorId,
                  },
                });
              }
            } catch (e) {
              Toast.fail('请扫医生二维码');
            }
          },
        },
      });
    }

    if (page.pathname) {
      dispatch(routerRedux.push({
        pathname: `${location.pathname}/${page.pathname}`,
        state: { title: page.text, mobile: profile.call },
      }));
    }
  };
  const quit = () => {
    localStorage.removeItem("auth"+sessionStorage.getItem("hid"));
    dispatch(routerRedux.push({
      pathname: `/signin`,
    }));
  };
  
  return (
    <div className={styles.setting}>
      <Flex
        align="middle"
        justify="center"
        className={styles.avatarContainer}>
        {profile.headPortrait == null ? 
         <img 
          className={styles.avatar}
          onClick={onAddto}
          src="http://test.tcm-ai.com/dist/e17db53258f2fdf94a820b77bb70d783.jpg"/>:
          <img 
          className={styles.avatar}
          onClick={onAddto}
          src={profile.headPortrait}/>}
          <Modal 
           popup 
           visible={disabled}   
           onClose={onClose}
           animationType="slide-up"
           style={{position: 'fixed',bottom: '0', width: '100%', left: '0'}}>
            <div style={{background:'#efefef'}}>
              <List.Item style={{background:'#efefef'}}>
                <Button style={{color:'#aa4929',fontWeight: 'bold'}} onClick={onCamera}>拍照</Button>
                <Button style={{color:'#aa4929',fontWeight: 'bold'}} onClick={onAlbum}>从相册选择</Button>
              </List.Item>
              <List.Item style={{background:'#efefef'}}>
                <Button style={{color:'#aa4929',fontWeight: 'bold'}} onClick={onClose}>取消</Button>
              </List.Item>
            </div>
        </Modal>
      </Flex>
      <div className={styles.user}>
        {profile.name}
      </div>
      <Grid data={settings} columnNum={3} hasLine={false} onClick={(page) => goto(page)} />
        <WhiteSpace size="lg" />
        <Button onClick={() => quit()} >退出</Button>
        <WhiteSpace size="lg" />
        <div>版本号：1.1.11 pre-release3</div>
    </div>  
  );
};

export default connect(({ profile, ...rest }) => ({
  ...profile,
  ...rest,
}))(SettingsPage);
